<template>
  <div class="my_container">
    <div class="my_avatar">
      <avatar v-if="user && user.UserName" size="96" :name="user?.UserName"></avatar>
    </div>
    <van-cell-group>
      <van-cell title="登录账号" :value="user?.UserCode" />
      <van-cell title="用户姓名" :value="user?.UserName" />
    </van-cell-group>
    <div style="height: 20px" />
    <van-button type="warning" @click="exit" size="large">退出登录</van-button>
  </div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores/userInfo';
import { useRouter } from 'vue-router';
import { showConfirmDialog } from 'vant';
import type { OnlineUser } from '@/model/common/onlineuser';
import { ref } from 'vue';
const user = ref<OnlineUser>();
const store = useUserStore();
const router = useRouter();
if (store.user) user.value = store.user;
const exit = () => {
  showConfirmDialog({
    title: '提示',
    message: '您确认要退出系统吗？',
  })
    .then(() => {
      store.log_out();
      router.push('/login');
    })
    .catch((e) => {
      console.log(e);
    });
};
</script>

<style>
.my_avatar {
  height: 180px;
  width: 100%;
  padding: 10px 10px;
  display: grid;
  place-items: center;
}
</style>
